<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { arrowMiddleware, ElMessage,ElMessageBox  } from 'element-plus';
import ExtansionDailog from './ExtansionDailog.vue';
import {referrerProduct,referrerUpdRate } from '@/api/ExtensionManage'
const seachTable = ref(null);
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();
const miniAppId = import.meta.env.VITE_APP_WEIXINID;
// 弹框组件代码

const dialogVisible = ref(false)
const productId=ref(null)
const dialogTitle = ref('统一设置比例')

const props = defineProps({
    userId:{
	type:String,
	default:''    
    },
})
const changeDialog = (val) => {
    dialogVisible.value = val
}

const successSubmit = (val) => {
   dialogVisible.value = false
   if(val == 'add'){
     seachTable.value.initSearch();
   }else{
     seachTable.value.handlerSearch();
   }
   instance.proxy.$forceUpdate();
}


let backForm = ref({
    referrerName:'', //姓名
    id:'',
    commissionRate:''
})


const ContentImg = ref('')


// 新增编辑回退时候刷新列表 
// onActivated(()=>{

//     let closeTagName = sessionStorage.getItem('closeTagName');
//     if(closeTagName == 'pharmacistManageEdit'){
//         seachTable.value.handlerSearch();
        
//     }else if(closeTagName == 'pharmacistManageAdd'){
//         seachTable.value.initSearch();
//     }
//     instance.proxy.$forceUpdate();
//     sessionStorage.removeItem('closeTagName');
// })
const formInline = ref([
    {
      type: "input",
      prop: "queryData",
      placeholder: "产品名称/编号/助记码/条码",
      label: "",
      model: "",
    }
])

const btnLefts = ref([
	{
	    label:"统一设置比例",
	    plain:true,
	    type:"primary",
	    show:true,
	    plain:true,
	    style:"border-color:#3480FF;color:#fff;background:#3480FF",
	    click:async ()=>{
		    productId.value=''
		    dialogTitle.value='统一设置比例'
		    dialogVisible.value = true
        backForm.value.commissionRate = ''
	        // const loading = ElLoading.service({
	        //     lock: true,
	        //     text: '导出中',
	        //     background: 'rgba(255, 255, 255, 0.7)',
	        // })
	        // try{
	        //   await exportFile(`/jy-member/member/referrer/detailsExport`,'post',`推广详情`,{},searchData.value)
	        //   loading.close()
	        // }catch(e){
	        //   loading.close()
	        // }
	    }
	},
])
const btnRights = ref([
])

const tableConfig = ref([
    {
      prop: "code",
      label: "产品编号",
      width: 130,
    },
    {
      prop: "productName",
      label: "产品名称",
   
    },
{
      prop: "retailPrice",
      label: "零售价 (元)",
    },
    {
      prop: "commissionRate",
      label: "分润比例",
      type:'slot',
      slotName:'commission'
    },
    {
      prop: "commissionPrice",
      label: "预计佣金 (元)",
    },
    {
      type: "action",
      label: "操作",
      width: 130,
      btns: [
        {
          label: () => "设置比例",
          
          click: async (row) => {
		  dialogTitle.value='设置比例'
		  dialogVisible.value = true
		  productId.value=row.productId
      backForm.value.commissionRate = row.commissionRate
		  console.log(props.userId);
            // router.push({name:"PersonalPromotionDetail",query:{id:row.id, referrerName:row.referrerName}})
          },
        },
      ],
    },
]);
const tableLoading = ref(false)
const totalPage = ref(0)
const tableData = ref([]);


const handlerSearch = async (formInline)=>{
    tableLoading.value = true;
    try{
      let data = {
          ...formInline,
          // queryData:formInline.queryData
	  userId:props.userId
        }
        const res = await referrerProduct(data)
        console.log(res,'res');
        totalPage.value = Number(res.total);
        tableData.value =  res.records || []
        tableLoading.value = false;
    }catch(e){
        tableLoading.value = false;
    }
}



</script>
<template>
    <div class="page-content" id="PersonalPromotionShop">
        <SeachTable 
          :tableType="1"
          ref="seachTable"
          :forms="formInline"
          :btnLefts="btnLefts"
          :btnRights="btnRights"
          :tableLoading="tableLoading"
          :tableConfig="tableConfig"
          :tableData="tableData"
          :totalPage="totalPage"
          :tableIndex="false"
	
          @handlerSearch="handlerSearch" 
        >
        <template #commission="{row, index}">
          <!-- <el-switch v-model="row.referrerStatus"  @change="(val) => changeStatue(val,row)"/> -->
	  <span>{{row.commissionRate}}%</span>
        </template>
        </SeachTable>
        <extansion-dailog
        v-if="dialogVisible"
        :dialogVisible="dialogVisible"
        :dialogTitle="dialogTitle"
        :backForm="backForm"
	:productId="productId"
	:userId="props.userId" 
        @changeDialog="changeDialog" 
        @successSubmit="successSubmit"
        ></extansion-dailog>
        
    </div>
</template>


<!-- 删除按钮样式 -->
<style lang="less" scoped>
	.page-content{
  height: calc(100% - 32px);
	}
.delete{
    background: #FF2440 !important;
}
#PersonalPromotionShop{
	:deep(.search-table .table){
	    height: calc(100% - 158px)!important;
	}
	// .search-table .table
:deep(.line-block){
	height:0!important;
	padding: 0!important;
}
:deep(.btn-area){
	// height:0!important;
	padding-top: 0!important;
}
:deep(.search-table .table){
   // height: 100%!important;
}
:deep(.jg){
	height: 0!important;
}
}

</style>